<template>
	<view>
		<view class="body after-navber w-100 h-100">
			<view style="height: 566rpx; position: relative; z-index: 10">
				<image src="/static/images/qFTlyDkjBZLKoS93.png"
					style="width: 100%; height: 566rpx; position: absolute; z-index: 0; top: 0; left: 0"></image>
				<image @tap="calendarSign" class="registre-img" src="/static/images/BTKRCQdWpih9le5w.png"
					style="position: relative" v-if="today_is_sign == 0"></image>
					<image class="registre-img" src="/static/images/vGAMRma73VXwH0Sb.png"
						style="position: relative" v-else></image>
				<view class="rntegral-font" style="font-size: 15px; position: relative">
					<text>今</text>
					日签到获得
					<text style="font-weight: bolder; color: #ffde00">{{ register.register_integral }}</text>
					{{money_name}}
				</view>
				<view @tap="rule" class="register-rule">规则</view>
			</view>
			<view class="content">
				<view class="register">
					<model-calendar :sendYear="toYear" :sendMonth="toMonth" :dataSource="signData" :totalNum="sumCount"
						@dateChange="getRecord">
					</model-calendar>
				</view>
			</view>
			<view @tap="hideModal" @touchmove.stop.prevent="preventTouchMove" id="modal-mask" v-if="register_rule">
			</view>
			<block v-if="register_rule">
				<view class="register_rule">
					<image @tap="hideModal" class="close" src="/static/images/icon-register-close.png"></image>
					<view class="rule">签到规则</view>
					<view class="rule-detail" v-for="(item, index) in register.register_rule" :key="item.id">{{ item }}
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {My} from '../../../apirequest/my-model.js';
	var m = new My();
	import modelCalendar from '../../components/calender.vue';
	export default {
		data() {
			return {
				toYear: parseInt(new Date().getFullYear()), //本日
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				sumCount: 0,
				signData:[],
				set: {},
				month: '',
				register: {
					register_integral: 1,
					register_rule: ['每天签到送1'+this.globalData.money_name]
				},
				register_rule: false,
				today_is_sign:0,
				money_name:this.globalData.money_name,

			}
		},
		components: {
			modelCalendar
		},
		onLoad() {
			this._index()
		},
		methods: {
			_index(){
				var that = this;
				m.sign_info({year:this.toYear,month:this.toMonth},(res) => {
					if(res.code== 1 ){
						that.signData = res.data.signData
						that.sumCount = res.data.sumCount
						that.register = res.data.register
						this.today_is_sign = res.data.today_is_sign
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			getRecord(data) {
				this.month = data
				var arr = data.split('-')
				this.toYear = arr[0]
				this.toMonth = arr[1]
				this._index()
			},
			rule: function() {
				var that = this
				that.register_rule = true
			},
			hideModal: function () {
				var that = this
				that.register_rule = false
			},
			calendarSign(){
				var that = this
				m.sign((res) => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 1){
						setTimeout(() => {
							that._index()
						},1000)
					}
				})
			},
		}
	}
</script>

<style>
	#modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		z-index: 1111;
		color: #fff;
	}

	.re_pic {
		width: 97rpx;
		height: 97rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.register_rule {
		width: 80%;
		overflow: hidden;
		background: #fff;
		z-index: 9999;
		position: fixed;
		left: 10%;
		top: 288rpx;
		border-radius: 8rpx;
		padding-bottom: 96rpx;
	}

	.rule {
		color: #353535;
		font-size: 16px;
		font-weight: bolder;
		margin: 56rpx 0 44rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.rule-detail {
		margin: 0 32rpx;
		color: #353535;
		font-size: 13px;
	}

	.close {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 32rpx;
		top: 28rpx;
	}

	.content {
		background: #fce7e2;
		padding-top: 48rpx;
		padding-bottom: 58rpx;
	}

	.register {
		background: #fff;
		margin: 0 24rpx;
		border: 2rpx solid #ebebeb;
		border-radius: 16rpx;
	}

	.registre-img {
		width: 308rpx;
		height: 308rpx;
		margin: auto;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.calendarSignDay {
		width: 308rpx;
		height: 308rpx;
		color: #fff;
		font-size: 15px;
		margin: auto;
		padding-top: 88rpx;
	}

	.lianxu {
		width: 308rpx;
		height: 50rpx;
		text-align: center;
	}

	.tianshu {
		height: 100rpx;
		width: 308rpx;
		text-align: center;
	}

	.rntegral-font {
		color: #fff;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.register-rule {
		position: absolute;
		height: 48rpx;
		width: 96rpx;
		background: #000000;
		border: 2rpx solid #fff;
		color: #ffffff;
		font-size: 11px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 24rpx 0 0 24rpx;
		opacity: 0.3;
		top: 48rpx;
		right: 0;
	}

	.register_success {
		width: 94%;
		height: 800rpx;
		overflow: hidden;
		z-index: 2222;
		position: fixed;
		left: 3%;
		top: 110rpx;
		border-radius: 8rpx;
		padding-bottom: 96rpx;
	}

	.register_success image {
		position: absolute;
		z-index: 3333;
	}

	.register_bac {
		width: 80%;
		height: 300rpx;
		background: #fff;
		position: absolute;
		top: 336rpx;
		left: 10%;
		z-index: 4444;
	}

	.register_font {
		z-index: 5555;
		color: #353535;
		font-size: 15px;
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}

	.zhidaolo {
		height: 64rpx;
		width: 320rpx;
		background: #ff4544;
		margin: 42rpx auto;
		z-index: 9999;
		border-radius: 32rpx;
	}

	.zhidaolo view {
		color: #fff;
		font-size: 15px;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
